<template>
    <view>
        <u-popup :show="show" @close="close" :round="12">
            <view class="content">
                <view class="fs-36 fw-600 text-color4 f ai-c jc-c pt-40 pb-40"> 所在地区 </view>
                <view class="close" @click="close"><u-icon name="close" color="#222222" size="15"></u-icon></view>
                <view class="pl-40 fs-28 fw-600 text-color11">{{ cityData.name }}</view>
                <scroll-view scroll-y="true" class="list mt-40" :scroll-into-view="codePosition">
                    <view class="pl-40">
                        <view class="fs-28 text-color3" id="hot">热门城市</view>
                        <view class="f fc-w mt-27">
                            <view
                                class="h-64 w-152 b-4 mr-16 mb-16 fs-28 text-color2 hot f ai-c jc-c"
                                v-for="(item, index) in hotList"
                                :key="index"
                                @click="selectCity(item)"
                                >{{ item.name }}</view
                            >
                        </view>
                    </view>
                    <view v-for="(item, index) in cityList" :key="index">
                        <view class="letter pl-40 h-68 f ai-c fs-26 fw-600 text-color3" :id="item.code">{{ item.code }}</view>
                        <view
                            class="city pl-40 h-68 f ai-c fs-26 text-color4 f ai-c jc-s-b pr-68"
                            v-for="(iten, indexs) in item.children"
                            :key="indexs"
                            :class="cityData.id == iten.id ? 'cityActive' : ''"
                            @click="selectCity(iten)"
                        >
                            <view>{{ iten.name }}</view>
                            <u-icon name="checkmark" color="#FABB3C" size="14" v-if="cityData.id == iten.id"> </u-icon>
                        </view>
                    </view>
                </scroll-view>
                <scroll-view scroll-y="true" class="letter-list w-30">
                    <view
                        v-for="(item, index) in letterList"
                        :key="index"
                        class="w-28 h-28 b-28 fs-20 fw-600 text-color4 mt-24 f ai-c jc-c"
                        :class="curtLetter == index ? 'active' : ''"
                        @click="changeLetter(item, index)"
                        >{{ item }}
                    </view>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { hotRegions } from '@/services/api/city';
// import { useRequest } from 'alova';
// const { send: sendHotRegions } = useRequest(hotRegions, { immediate: false });
const codePosition = ref<string>('');
const show = ref(false);
const curtLetter = ref(0);
const letterList = ref<any[]>(['热']);
const cityList = ref<any[]>([]);
const hotList = ref<any[]>([]);
const hot = ['成都', '北京', '深圳', '广州', '上海', '重庆', '武汉', '长沙', '杭州', '郑州', '宜昌', '东菀', '佛山', '石家庄'];
const cityData = ref({ name: '', id: null }); //选中的城市
const emit = defineEmits(['getCityDaya']);
getCity();
function setShow() {
    show.value = true;
}
function selectCity(data: Object) {
    cityData.value = data;
    show.value = false;
    emit('getCityDaya', cityData.value);
}
function close(){
	show.value= false
	emit('close',false)
}
async function getCity() {
    const res = await hotRegions({});
    const data = res.data;
    let letter: string[] = [];
    data.forEach((item: any) => {
        item.code = item.code.toUpperCase();
        letter.push(item.code);
        hot.forEach((iten) => {
            if (item.name == iten) {
                hotList.value.push(item);
            }
        });
    });
    letter = Array.from(new Set(letter));
    let cityData = [...letter].map((item) => ({ code: item, children: [] }));

    data.forEach((item: any) => {
        cityData.forEach((iten) => {
            if (item.code == iten.code) {
                iten.children.push(item);
            }
        });
    });
    letterList.value = letterList.value.concat(letter);
    cityList.value = cityData;
}
function changeLetter(data: string, index: number) {
    if (data == '热') {
        codePosition.value = 'hot';
    } else {
        codePosition.value = data;
    }

    curtLetter.value = index;
}
defineExpose({ setShow });
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    width: 100%;
    .cityActive {
        color: #fabb3c !important;
    }
    .close {
        position: absolute;
        right: 42rpx;
        top: 51rpx;
    }
    .letter-list {
        position: absolute;
        height: 860rpx;
        right: 12rpx;
        top: 130rpx;
    }
    .active {
        background: #fabb3c;
        color: #fff;
    }
    .list {
        height: 848rpx;
        .city {
            background: #fff;
            width: 100%;
        }
        .letter {
            background: #f8f8f8;
            width: 100%;
        }
        .hot {
            background: #f8f8f8;
        }
    }
}
</style>
